<template>
  <div class="expert-details">
    <div class="expert-main max-wrapper">
      <div class="expert-title">
        <!-- <img class="img-avator" :src="showExpertAvator(expertData)" :onerror="showExpertAvator(expertData, true)"> -->
        <el-image class="img-avator" :src="showExpertAvator(expertData)" fit="cover">
          <template #error>
            <img src="/images/expert_default.png" style="width: 100%; height: 100%;">
          </template>
        </el-image>
        <div class="expert-info">
          <div class="name">
            {{ expertData.name }}
            <span class="tag">{{ expertData.expertTitle }}</span>
            <div class="advice">
              <el-button @click="advice" :icon="ChatLineRound">咨询</el-button>
              <el-button v-if="appCourseShow" @click="apppointCourse" :icon="Tickets">预约课程</el-button>
            </div>
          </div>
          <div class="item-info">
            <span class="label">职称：</span>
            {{ expertData.expertTitle }}
          </div>
          <div class="item-info">
            <span class="label">机构：</span>
            {{ expertData.unit }}
          </div>
          <div class="item-info">
            <span class="label">研究方向：</span>
            {{ expertData.researchDirection }}
          </div>
          <!-- <div class="item-info">
            <span class="label">专家简介：</span>
            {{ expertData.expertDesp }}
          </div> -->
        </div>
        <div class="other-info">
          <div class="other-row">
            <div class="row-title">
              <span>专家指标</span>
            </div>
            <div class="item-list">
              <div class="other-item">
                <div class="num">{{ expertData.totalAchievements ?? 0 }}</div>
                <div>成果总量</div>
              </div>
              <div class="other-item">
                <div class="num">{{ expertData.timesCited ?? 0 }}</div>
                <div>被引频次</div>
              </div>
              <div class="other-item">
                <div class="num">{{ expertData.downloadCount ?? 0 }}</div>
                <div>成果下载量</div>
              </div>
              <div class="other-item">
                <div class="num">{{ expertData.hIndex ?? 0 }}</div>
                <div>H指数</div>
              </div>
              <div class="other-item">
                <div class="num">{{ expertData.gIndex ?? 0 }}</div>
                <div>G指数</div>
              </div>
            </div>
          </div>
          <div v-if="isPubExpert" class="other-row">
            <div class="row-title">
              <span>宣讲指标</span>
            </div>
            <div class="item-list">
              <div class="other-item">
                <div class="num">{{ expertData.preachCourse_count ?? 0 }}</div>
                <div>课程数</div>
              </div>
              <div class="other-item">
                <div class="num">{{ expertData.preach_order_Status1 ?? 0 }}</div>
                <div>宣讲次数</div>
              </div>
              <div class="other-item">
                <div class="num">{{ expertData.preachCourse_peoples ?? 0 }}</div>
                <div>宣讲服务人次</div>
              </div>
              <div class="other-item">
                <div class="num">{{ expertData.preachEvaluate ? expertData.preachEvaluate.toFixed(2) : 0 }}</div>
                <div>评分</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-tabs v-model="activeName">
        <el-tab-pane label="专家简介" name="introduction">
          <div class="introduction" v-if="expertData.expertDesp">
            {{ expertData.expertDesp }}
          </div>
          <el-empty description="暂无简介内容" v-else />
        </el-tab-pane>
        <el-tab-pane label="专家成果" name="achievement">
          <div class="expert-achievements-database">
            <el-checkbox v-model="checkAllAchievements" :indeterminate="isIndeterminate" @change="handleCheckAllChange"
              style="margin-right: 20px;">全选</el-checkbox>
            <el-checkbox-group v-model="checkAchievements" @change="achievementsCheckChange">
              <el-checkbox label="CJFD">期刊</el-checkbox>
              <el-checkbox label="CDFD">博士</el-checkbox>
              <el-checkbox label="CMFD">硕士</el-checkbox>
              <el-checkbox label="CPFD">中国会议</el-checkbox>
              <el-checkbox label="IPFD">国际会议</el-checkbox>
              <el-checkbox label="CCND">报纸</el-checkbox>
              <el-checkbox label="SCPD">中国专利</el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="expert-content" v-if="expertAchievements.length != 0">
            <!-- <div class="main-l">
              <div class="positional">
                <div class="common-title">成果类型</div>
                <div class="info-item">
                  <span class="otw-1">期刊论文</span><span>100</span>
                </div>
                <div class="info-item">
                  <span class="otw-1">报纸</span><span>100</span>
                </div>
                <div class="info-item">
                  <span class="otw-1">会议论文</span><span>100</span>
                </div>
                <el-collapse-transition>
                  <div v-show="posExpand">
                    <div class="info-item">
                      <span class="otw-1">期刊论文</span><span>100</span>
                    </div>
                    <div class="info-item">
                      <span class="otw-1">报纸</span><span>100</span>
                    </div>
                    <div class="info-item">
                      <span class="otw-1">会议论文</span><span>100</span>
                    </div>
                  </div>
                </el-collapse-transition>
                <div @click="posExpand = !posExpand" :class="['all-expand', posExpand ? 'active' : '']">
                  全部{{ posExpand ? '收起' : '展开' }}
                  <el-icon>
                    <DArrowRight />
                  </el-icon>
                </div>
              </div>
              <div class="institution">
                <div class="common-title">学科</div>
                <div class="info-item">
                  <span class="otw-1">哲学</span><span>100</span>
                </div>
                <div class="info-item">
                  <span class="otw-1">马克思主义理论</span><span>100</span>
                </div>
                <div class="info-item">
                  <span class="otw-1">政治学</span><span>100</span>
                </div>
                <div class="info-item">
                  <span class="otw-1">教育学</span><span>100</span>
                </div>
                <el-collapse-transition>
                  <div v-show="insExpand">
                    <div class="info-item">
                      <span class="otw-1">公共管理</span><span>100</span>
                    </div>
                    <div class="info-item">
                      <span class="otw-1">政治学</span><span>100</span>
                    </div>
                  </div>
                </el-collapse-transition>
                <div @click="insExpand = !insExpand" :class="['all-expand', insExpand ? 'active' : '']">
                  全部{{ insExpand ? '收起' : '展开' }}
                  <el-icon>
                    <DArrowRight />
                  </el-icon>
                </div>
              </div>
            </div> -->
            <div class="main-r">
              <div class="opera-header">
                <div class="sort">
                  <div @click="changeSort('Year')" :class="['sort-item', sortType == 0 ? 'sort-active' : '']">默认排序</div>
                  <div @click="changeSort('PubDate')" :class="['sort-item', sortType == 'PubDate' ? 'sort-active' : '']">
                    时间排序
                    <el-icon :style="{ color: sortType == 'PubDate' ? '#3B4D89' : '#D3D3D3' }">
                      <SortDown />
                    </el-icon>
                    <el-icon :style="{ color: sortType == 'PubDate' ? '#3B4D89' : '#D3D3D3' }">
                      <SortUp />
                    </el-icon>
                  </div>
                  <!-- <div @click="changeSort(2)" :class="['sort-item', sortType == 2 ? 'sort-active' : '']">相关度排序</div> -->
                </div>
                <div class="num">共 {{ dataAll }} 条数据</div>
              </div>
              <div v-loading="listLoading" class="article-list">
                <div v-for="( articleItem, articleIndex ) in  expertAchievements " :key="articleIndex"
                  class="article-item">
                  <div class="article-header">
                    <div class="title otw-1">
                      <span class="article-paper-name">
                        [{{ articleItem.sourceDatabase }}]
                      </span>


                      <span @click="goDetail(articleItem)" style="cursor: pointer;" :title="articleItem.title">{{
                        articleItem.title }}</span>
                    </div>
                    <!-- <div class="opera">
                      <el-icon>
                        <Share />
                      </el-icon>
                      <span style="margin-right: 20px;">导出</span>
                      <el-icon>
                        <Position />
                      </el-icon>
                      <span>分享</span>
                    </div> -->
                  </div>
                  <div class="desc">
                    <p class="otw-1">
                      <span class="article-author">{{ articleItem.author }}</span>
                      <span>{{ format(articleItem.pubDate) }}</span>
                    </p>
                    <div class="otw-2">{{ articleItem.theme }}</div>
                  </div>
                  <!-- <div class="article-other">
                    <div>{{ articleItem[fieldConfigs(articleItem.tableName)['articleKeywords']] ? '关键词：' + articleItem[fieldConfigs(articleItem.tableName)['articleKeywords']].split(';;').join("，") : '' }}</div>
                    <div class="other-num">
                      被引：<span style="margin-right: 10px;">{{ articleItem.citedFrequency ?? 0 }}</span> 下载频次：<span>{{ articleItem.downloadFrequency ?? 0 }}</span>
                    </div>
                  </div> -->
                </div>
              </div>
              <div class="pagination">
                <el-pagination :total="dataAll" v-model:current-page="currentPage" :page-size="pageSize"
                  @current-change="currentPageChange" prev-text="上一页" next-text="下一页" layout="prev, pager, next"
                  background />
              </div>
            </div>
          </div>
          <el-empty description="暂无成果数据" v-else />
        </el-tab-pane>
        <el-tab-pane v-if="isPubExpert" label="专家课程" name="course">
          <div v-loading="courseLoading" class="cource-list" v-if="courseList.length != 0">
            <el-row :gutter="34">
              <el-col v-for="(courceItem, courceIndex) in courseList" :key="courceIndex" :span="6">
                <div @click="toCourseDetails(courceItem.id)" class="cource-item">
                  <img v-if="courceItem.isRecommend == 1" class="img-recommend" src="@/assets/images/front/recommend.png">
                  <!-- <img class="cource-img" :src="getImageUrl(courceItem.coverUrl)"> -->
                  <el-image style="width: 100%;height: 191px;" :src="getImageUrl(courceItem.coverUrl)" fit="cover">
                    <template #error>
                      <img src="/images/course_default.png" style="width: 100%; height: 100%;">
                    </template>
                  </el-image>
                  <div class="cource-content">
                    <div class="opera">
                      <div class="type">{{ courseTypeList.dict[courceItem.type] }}</div>
                      <el-button class="button" type="primary" @click.stop="reservationCourse(courceItem)" round>预
                        约</el-button>
                    </div>
                    <div class="cource-title otw-1" :title="courceItem.title">{{ courceItem.title }}</div>
                    <div class="cource-position otw-1">{{ courceItem.expertInfo.name }}·{{
                      courceItem.expertInfo.expertTitle
                    }}
                    </div>
                    <div class="cource-line"></div>
                    <div class="show">
                      <div class="show-date">{{ format(courceItem.createTime) }}</div>
                      <div class="show-num">{{ courceItem.joinPeopleCount }}</div>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="pagination" v-if="courseList.length != 0">
            <el-pagination :total="coursePager.total" v-model:current-page="coursePager.pageIndex"
              :page-size="coursePager.pageSize" @current-change="getCourseList" prev-text="上一页" next-text="下一页"
              layout="prev, pager, next" background />
          </div>
          <el-empty description="暂无课程数据" v-else />
        </el-tab-pane>
        <el-tab-pane v-if="isPubExpert" label="宣讲动态" name="trends">
          <div v-loading="trendsLoading" class="trends-list" v-if="trendsList.length != 0">
            <div @click="toTrendsDetails(trendsItem)" v-for="(trendsItem, trendsIndex) in trendsList" :key="trendsIndex"
              class="trends-item">
              <div class="appoint-time">
                <div class="time-t">{{ moment(trendsItem.appointTime).format('MM-DD') }}</div>
                <div class="time-b">{{ moment(trendsItem.appointTime).format('YYYY') }}</div>
              </div>
              <div class="trends-img">
                <el-image style="width: 100%;height: 100%;" :src="getImageUrl(trendsItem.courseCoverUrl)" fit="cover">
                  <template #error>
                    <img src="/images/course_default.png" style="width: 100%; height: 100%;">
                  </template>
                </el-image>
              </div>
              <div class="trends-r">
                <div class="item-title otw-2">{{ trendsItem.courseName }}</div>
                <div class="trends-content otw-4">{{ extractText(trendsItem.courseDescription) }}</div>
              </div>
            </div>
          </div>
          <div class="pagination" v-if="trendsList.length != 0">
            <el-pagination :total="trendsPager.total" v-model:current-page="trendsPager.pageIndex"
              :page-size="trendsPager.pageSize" @current-change="getCourseList" prev-text="上一页" next-text="下一页"
              layout="prev, pager, next" background />
          </div>
          <el-empty description="暂无宣讲动态" v-else />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
  <CourseAppointment :courseId="appointmentCourseId" :expertId="appointmentExpertId" :courseName="appointmentCourseName"
    v-model:visible="reservationVis" :type="courseType" />
</template>
<script>
export default { name: 'ExpertDetails' }
</script>
<script setup>
import { ref, computed } from 'vue';
import { useSystemStore } from '@/stores/modules/system.js';
import { useAuthStore } from '@/stores/modules/auth.js';
import { ChatLineRound } from '@element-plus/icons-vue'
// DArrowRight,Position, Share 
import { SortDown, SortUp, Tickets } from '@element-plus/icons-vue'
import { http } from '@/utils/http/index.js'
import { useRoute, useRouter } from 'vue-router';
import moment, { format } from '@/plugins/moment.js'
import { extractText, showExpertAvator, getImageUrl } from '@/utils/index.js'
import usePager from '@/hooks/usePager.js'
import { ElMessage, ElMessageBox } from 'element-plus';
import CourseAppointment from '@/components/CourseAppointment.vue';

const router = useRouter()
const systemStore = useSystemStore()

/**设置头部 */
systemStore.headerType = 'platform_black'
systemStore.headerBgcolor = 'normal'
systemStore.headerFontColor = '0'
systemStore.headerWidthType = 'max'
systemStore.needFooter = false

const activeName = ref('introduction')

const route = useRoute()
if (!route.query.id) {
  router.push('/expert-database')
}
const expertData = ref({})
http.$GET('/TheoryStudyM/GetExpertInfoDetailById', { id: route.query.id }).then(res => {
  if (res.isError) return
  expertData.value = res.result
  getList()
})

/**是否宣讲专家 */
const isPubExpert = computed(() => {
  return expertData.value.expertType == '宣讲专家'
})

const authStore = useAuthStore()
/**打开咨询 */
const advice = () => {
  if (authStore.isExpired(true)) return
  ElMessageBox.prompt('请输入咨询内容', '咨询', {
    confirmButtonText: '提交',
    cancelButtonText: '取消',
    inputType: 'textarea',
    inputValidator: str => {
      if (!str) return '请输入提交内容'
      if (str.length > 80) return '提交内容超出80字数限制'
      return true
    }
  }).then(({ value }) => {
    http.$POST('/Preach/AddPreachConsult', { content: value, ExpertId: expertData.value.id, uid: authStore.userInfo.uid }).then(res => {
      if (res.isError) return ElMessage.warning('提交失败')
      ElMessage.success(res.message)
    })
  }).catch(() => { })
}

/**创建研究方向课程，并预约 */
const appCourseShow = computed(() => {
  return courseList.value.length == 0
})
const apppointCourse = () => {
  if (authStore.isExpired(true)) return
  http.$POST('/Preach/CreateBaseCourse', { expertId: expertData.value.id }).then(res => {
    if (res.isError) return ElMessage.warning(res.message)
    courseType.value = 'baseCourse'
    appointmentExpertId.value = expertData.value.id
    appointmentCourseId.value = res.result.id
    appointmentCourseName.value = res.result.title
    reservationVis.value = true
  })
}

/**left 展开 */
// const posExpand = ref(false)
// const insExpand = ref(false)

/* 成果库列表字段配置 */
// const fieldConfigs = (type) => {
//   if(type == 'CJFD') {
//     return {
//       articleType: 'chineseJournalName',
//       articleTitle: 'title',
//       articleAbstract: 'chineseAbstract',
//       articleKeywords: 'chineseKeywords',
//     }
//   }
//   if(type == 'CDFD') {
//     return {
//       articleType: 'chineseJournalName',
//       articleTitle: 'title',
//       articleAbstract: 'chineseAbstract',
//       articleKeywords: 'chineseKeywords',
//     }
//   }
//   if(type == 'CMFD') {
//     return {
//       articleType: 'disciplineMajor',
//       articleTitle: 'title',
//       articleAbstract: 'chineseAbstract',
//       articleKeywords: 'chineseKeywords',
//     }
//   }
//   if(type == 'CPFD') {
//     return {
//       articleType: '',
//       articleTitle: 'meettingName',
//       articleAbstract: 'paperAbstract',
//       articleKeywords: 'paperKeyWords',
//     }
//   }
//   if(type == 'IPFD') {
//     return {
//       articleType: '',
//       articleTitle: 'meettingName',
//       articleAbstract: 'paperAbstract',
//       articleKeywords: 'paperKeyWords',
//     }
//   }
//   if(type == 'CCND') {
//     return {
//       articleType: 'chineseNewspaperName',
//       articleTitle: 'title',
//       articleAbstract: '',
//       articleKeywords: '',
//     }
//   }
//   if(type == 'SCPD') {
//     return {
//       articleType: 'type',
//       articleTitle: 'patentTitle',
//       articleAbstract: 'abstract',
//       articleKeywords: 'keyWords',
//     }
//   }
// }

/* 所选成果库 */
const checkAllAchievements = ref(false)
const isIndeterminate = ref(true)
const checkAchievements = ref(["CJFD"])
const achievementsList = ["CJFD", "CDFD", "CMFD", "CPFD", "IPFD", "CCND", "SCPD"]
/* 切换成果库 */
const handleCheckAllChange = (val) => {
  checkAchievements.value = val ? achievementsList : []
  queryParams.achievementsCodeArr = checkAchievements.value
  isIndeterminate.value = false
  currentPage.value = 1
  queryParams.theoryStudyGetListAndPageInfoInput.pageIndex = 1
  getList()
}
const achievementsCheckChange = (val) => {
  queryParams.achievementsCodeArr = val
  currentPage.value = 1
  queryParams.theoryStudyGetListAndPageInfoInput.pageIndex = 1
  getList()
}

const listLoading = ref(false)

/* 成果列表 */
const expertAchievements = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const dataAll = ref(0)

/* 查询参数 */
const queryParams = {
  achievementsCodeArr: checkAchievements.value,
  theoryStudyGetListAndPageInfoInput: {
    pageIndex: currentPage.value,
    pageSize: pageSize.value,
    authToken: authStore.auth_token,
    orderbyCol: "Year",
    dfi: {},
  },
}

/* 切换页码 */
const currentPageChange = (val) => {
  currentPage.value = val
  queryParams.theoryStudyGetListAndPageInfoInput.pageIndex = val
  getList()
}

const getList = () => {
  if (!queryParams.achievementsCodeArr.length) return ElMessage.warning("请至少选择一个成果库进行查询")
  listLoading.value = true
  queryParams.theoryStudyGetListAndPageInfoInput.dfi = {
    logic: 0,
    filters: [
      { field: 'author', operator: 0, value: expertData.value.name }
    ]
  }
  http.$POST("/Achievements/GetAchievementsInfoList", queryParams).then(res => {
    listLoading.value = false
    if (res.isError) return ElMessage.warning("查询失败")
    expertAchievements.value = res.result.dataLst
    dataAll.value = res.result.countAll
  }).catch(() => {
    listLoading.value = false
    expertAchievements.value = []
    dataAll.value = 0
  })
}

/**右侧排序 */
const sortType = ref('Year')
const changeSort = (type) => {
  sortType.value = type
  currentPage.value = 1
  queryParams.theoryStudyGetListAndPageInfoInput.pageIndex = 1
  queryParams.theoryStudyGetListAndPageInfoInput.orderbyCol = type
  getList()
}

/* 跳转专家成果详情 */
const goDetail = (item) => {
  window.open(`https://hydev.cnki.net/KCMS/detail/detail.aspx?dbcode=${item.tableName}&dbname=${item.dbName ? item.dbName.slice(0, -1) : ''}&filename=${item.fileName}`)
  /* window.open(`/expert-achievements/achievements-details?id=${item.uniqueId}&code=${item.tableName}`) */
}

/**专家论文数据 */
/* const { pager, listLoading, proxyFun } = usePager(5, '/Expert/GetExpertAchievementsList')
const articletList = ref([])
const getList = (param = {
  dfi: {
    logic: 0,
    filters: [
      { field: 'ExpertId', operator: 8, value: route.query.id },
    ]
  }
}) => {
  proxyFun(param).then(res => {
    articletList.value = res.result.dataLst
  })
} */

/* getList() */

const toCourseDetails = (courseId) => {
  window.open(`/explain-and-publicize/course-details?id=${courseId}`)
}

/**专家课程 */
const courseList = ref([])
const { pager: coursePager, listLoading: courseLoading, proxyFun: courseProxyFun } = usePager(12, '/Preach/GetPreachCourseList')
const courseParams = ref({
  dfi: {
    logic: 0,
    filters: [
      { field: 'ExpertId', operator: 8, value: route.query.id },
      { field: 'status', operator: 8, value: '1' },
    ]
  }
})

/**根据类型查询课程 */
const getCourseList = () => {
  courseProxyFun(courseParams.value).then(res => {
    courseList.value = res.result.dataLst.map(el => {
      const temp = { ...el, expertInfo: ref({}) }
      getExpertDetails(el.expertId).then(exRes => temp.expertInfo.value = exRes)
      return temp
    })
  })
}

const getExpertDetails = (expertId) => new Promise(reslove => {
  http.$GET('/Preach/GetExpertDetail', { id: expertId }).then(res => {
    if (res.isError) return
    reslove(res.result ?? {});
  })
})

const courseTypeList = ref({ options: [], dict: {} })
http.$POST('/PreachM/GetPreachCourseTypeInfoList', { pageIndex: 1, pageSize: 99 }).then(res => {
  if (res.isError) return
  courseTypeList.value = {
    options: res.result.dataLst,
    dict: res.result.dataLst.reduce((pre, next) => ({ ...pre, [`${next.id}`]: next.courseTypeName }), {})
  }
})

getCourseList()

/**预约课程 */
const reservationVis = ref(false)
const appointmentCourseId = ref('')
const appointmentExpertId = ref('')
const appointmentCourseName = ref('')
const courseType = ref('')
const reservationCourse = (item) => {
  courseType.value = ''
  appointmentCourseId.value = item.id
  appointmentExpertId.value = item.expertId
  appointmentCourseName.value = item.title
  reservationVis.value = true
}

/**专家动态 */
const trendsList = ref([])
const { pager: trendsPager, listLoading: trendsLoading, proxyFun: trendsProxyFun } = usePager(8, '/PreachM/GetPreachOrderInfoList')
const trendsParams = ref({
  dfi: {
    logic: 0,
    filters: [
      { field: 'ExpertId', operator: 8, value: route.query.id },
      { field: 'Status', operator: 8, value: 1 },
    ]
  }
})

const getTrendsList = () => {
  trendsProxyFun(trendsParams.value).then(res => {
    trendsList.value = res.result.dataLst
  })
}

getTrendsList()

const toTrendsDetails = (orderItem) => {
  window.open('/expert-database/expert-trends?id=' + orderItem.id)
}

</script>
<style lang='scss' scoped>
.expert-details {
  background-color: #F8F8F8;
  padding-top: 22px;
  padding-bottom: 60px;
  min-height: 100vh;
  font-family: PingFang SC-Medium, PingFang SC;

  .expert-main {
    background-color: #fff;
    padding: 26px 27px;

    .expert-title {
      min-height: 210px;
      display: flex;

      .img-avator {
        width: 120px;
        height: 156px;
        object-fit: cover;
      }

      .expert-info {
        margin-left: 39px;
        padding-right: 39px;
        width: 46%;
        border-right: 1px solid #EBEBEB;

        .name {
          font-size: 18px;
          color: #333333;
          font-weight: bold;
          margin-bottom: 16px;
          display: flex;
          align-items: center;

          .advice {
            margin-left: auto;

            :deep(.el-button) {
              border-radius: 6px;
              color: #383838;
              background-color: #FAFAFA;
            }
          }
        }

        .tag {
          padding: 2px 9px;
          color: var(--theme-color);
          border: 1px solid var(--theme-color);
          font-size: 13px;
          border-radius: 12px;
          margin-left: 24px;
        }

        .item-info {
          width: 100%;
          display: inline-block;
          font-size: 15px;
          color: #333333;
          margin-bottom: 12px;
          vertical-align: top;

          .label {
            color: #7C7C7C;
          }
        }
      }

      .other-info {
        padding-left: 39px;
        flex: 1;
        width: 0;

        .other-row {
          padding: 8px 14px 8px;
          background-color: #F9F9F9;
          border-radius: 6px;
          margin-bottom: 18px;

          .row-title {
            color: #626262;
            font-size: 12px;

            span {
              font-weight: bold;
              font-size: 14px;
            }
          }

          &:last-child {
            margin-bottom: 0;
          }
        }

        .item-list {
          margin-top: 6px;
          display: flex;

          .other-item {
            flex: 1;
            text-align: center;
            margin-bottom: 4px;
            font-size: 13px;
            color: #626262;
            font-weight: 400;

            .num {
              font-size: 32px;
              font-weight: 600;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }

    :deep(.el-tabs) {
      .el-tabs__item {
        font-size: 15px;

        &.is-active {
          font-weight: bold;
          color: #333333;
        }
      }

      .el-tabs__active-bar {
        background-color: #6979AB;
      }
    }

    .introduction {
      margin-top: 10px;
      min-height: 400px;
      padding: 20px;
      background-color: #FAFAFA;
    }

    .expert-achievements-database {
      display: flex;
    }

    .expert-content {
      display: flex;
      gap: 24px;
      padding-top: 10px;

      .main-l {
        width: 270px;

        .common-title {
          height: 55px;
          font-size: 18px;
          font-weight: normal;
          color: #333333;
          display: flex;
          align-items: center;
          padding: 0 25px;
          background-color: #FCFAFA;
          border-bottom: 1px solid #E7E7E7;
        }

        .info-item {
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 25px;
          height: 55px;
          font-family: 微软雅黑;

          span {
            font-size: 14px;
            color: #333333;

            &:first-child {
              width: 68%;
            }

            &:last-child {
              width: 26%;
              text-align: right;
            }
          }
        }

        .all-expand {
          user-select: none;
          font-size: 16px;
          font-weight: 400;
          color: #3F5397;
          padding: 14px 25px;
          text-align: center;
          cursor: pointer;

          .el-icon {
            transform: rotate(90deg);
            vertical-align: middle;
            transition: all .3s;
          }

          &.active {
            .el-icon {
              transform: rotate(-90deg);
            }
          }
        }

        .positional {
          background-color: #fff;
          margin-bottom: 22px;
          border: 1px solid #E7E7E7;
        }

        .institution {
          border: 1px solid #E7E7E7;
          background-color: #fff;

        }
      }

      .main-r {
        flex: 1;
        background-color: #fff;

        .opera-header {
          padding: 0 20px;
          height: 42px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          background-color: #FCFAFA;
          margin-bottom: 26px;
          font-family: MicrosoftYaHei-, MicrosoftYaHei;

          .sort {
            display: flex;
            gap: 36px;

            .sort-item {
              user-select: none;
              font-size: 14px;
              font-weight: 400;
              color: #333333;
              cursor: pointer;

              &.sort-active {
                color: #3B4D89;
                font-weight: bold;
              }

              .el-icon {
                vertical-align: middle;

                i {

                  font-weight: 700;
                }

                &:last-child {
                  margin-left: -8px;
                }
              }
            }
          }

          .num {
            font-size: 14px;
            font-weight: normal;
            color: #3B4D89;
          }
        }

        .article-list {
          min-height: 360px;

          .article-item {
            padding: 20px 16px;
            border-bottom: 1px solid #EFEFEF;

            .article-header {
              display: flex;
              margin-bottom: 5px;

              .article-paper-name {
                color: #A82735;
                margin-right: 8px;
              }

              .title {
                font-size: 16px;
                font-weight: bold;
                color: #333333;
                width: 86%;
              }

              .opera {
                flex: 1;
                width: 0;
                text-align: right;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                color: #333;
                font-weight: bold;
                user-select: none;

                .el-icon,
                span {
                  cursor: pointer;
                  color: #4B4B4B;
                }

                .el-icon {
                  margin-right: 4px;

                }
              }
            }

            .article-author {
              color: #92A9D3;
              margin-right: 16px;
            }

            .desc {
              font-size: 16px;
              font-weight: 400;
              color: #7C7C7C;
              line-height: 24px;
            }

            .article-other {
              display: flex;
              justify-content: space-between;
              align-items: center;
            }

            .other-num {
              margin-top: 7px;
              color: #7C7C7C;
              font-weight: bold;
              flex: 1;
              display: flex;
              justify-content: flex-end;

              span {
                color: var(--theme-color);
                font-weight: bold;
              }
            }
          }
        }
      }
    }

    .cource-list {
      min-height: 412px;
      padding-top: 10px;

      .cource-item {
        width: 100%;
        height: 386px;
        display: flex;
        flex-direction: column;
        margin-bottom: 25px;
        position: relative;
        cursor: pointer;

        .img-recommend {
          top: 10px;
          left: 9px;
          position: absolute;
          width: 50px;
          height: 30px;
          z-index: 2;
        }

        .cource-img {
          width: 100%;
          height: 191px;
          display: block;
          object-fit: cover;
        }

        .cource-content {
          flex: 1;
          background-color: #FAFAFA;
          padding: 18px 18px 14px;

          .opera {
            display: flex;
            justify-content: space-between;
            margin-bottom: 16px;

            .type {
              font-size: 16px;
              font-weight: 400;
              color: var(--theme-color);
            }

            .button {
              width: 77px;
              height: 26px;
            }
          }

          .cource-title {
            font-size: 18px;
            font-weight: bold;
            color: #333333;
            margin-bottom: 16px;
          }

          .cource-position {
            font-size: 16px;
            font-weight: 400;
            color: #5C5C5C;
          }

          .cource-line {
            width: 100%;
            height: 1px;
            background-color: #DDDDDD;
            margin: 24px 0 13px;
          }

          .show {
            display: flex;
            justify-content: space-between;

            .show-date {
              font-size: 16px;
              font-weight: 400;
              color: #5C5C5C;
            }

            .show-num {
              padding-left: 36px;
              background-image: url(@/assets/images/front/people_num.png);
              background-repeat: no-repeat;
              background-size: 32px 22px;
              color: var(--theme-color);
              font-size: 15px;
            }
          }
        }
      }

    }

    .trends-list {
      margin-top: 17px;
      padding-bottom: 49px;
      min-height: 600px;

      .trends-item {
        cursor: pointer;
        height: 300px;
        display: flex;
        padding-top: 27px;
        padding-bottom: 50px;
        border-bottom: 1px solid #E7E7E7E7;

        .appoint-time {
          padding-left: 30px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          color: var(--theme-color);
          margin-right: 40px;

          .time-t {
            width: 100%;
            font-size: 26px;
            font-weight: bold;
          }

          .time-b {
            text-align: right;
            font-size: 26px;
            font-size: 18px;
          }
        }

        .trends-img {
          width: 453px;
          height: 100%;
        }

        .trends-r {
          margin-left: 74px;
          flex: 1;
          width: 0;
          height: 100%;
          font-size: 18px;
          font-weight: 400;
          color: #999899;
          display: flex;
          flex-direction: column;
          justify-content: space-around;

          .item-title {
            font-size: 26px;
            font-weight: bold;
            color: #393939;
          }

          &:hover {
            .item-title {
              color: var(--theme-color);
            }
          }
        }
      }
    }
  }

  .pagination {
    margin: 45px 0 30px;

    :deep(.el-pagination) {
      justify-content: center;
    }
  }
}
</style>